<template>
  <Back />
  <div class="loading" v-if="loading">
    <van-loading />
  </div>
  <div class="bg-#fafafa min-h-100vh p-t-16px">
    <div class="box flex justify-between items-center">
      <div>
        <div class="font-size-1.6rem m-b-0.6rem">{{ shop.name }}</div>
        <div class="flex items-center">
          <img class="w-1.4rem h-1.4rem m-r-0.2rem" src="../../assets/images/address.png" />
          <div class="font-size:1.2rem">{{ $t('home.order.distance') }}{{ shop.distance }}</div>
        </div>
        <div class="font-size:1.2rem m-t-0.6rem">{{ shop.address }}</div>
      </div>
      <div class="p-10px" @click="changeShop"><van-icon name="arrow" color="#3AA1A2" /></div>
    </div>

    <div class="box m-t16px">
      <div class="products" v-for="item in createOrder.order?.productInfo" :key="item.id">
        <div class="flex items-center">
          <img :src="item.productImg" />
          <div>
            <div class="font-600">{{ showName(item) }}</div>
            <div class="color-#666">{{ item.size }}/{{ showCold(item.cold!) }}/{{ showSugar(item.sugar!) }}</div>
          </div>
        </div>
        <div>
          <div class="font-size-1.6rem">{{ item.price }}</div>
          <div>{{ t('shop.submit.total') }}{{ item.amount }}{{ t('shop.submit.unit') }}</div>
        </div>
      </div>
    </div>

    <div class="box m-t16px">
      <van-coupon-cell
        :coupons="createOrder.availableCoupons"
        :chosen-coupon="chosenCoupon"
        @click="showCoupons = true"
        currency=""
        :title="t('home.home.coupon')"
      />
    </div>

    <div class="box m-t16px">
      <van-radio-group v-model="payWay">
        <van-radio :name="2">
          <div>{{ t('shop.submit.payWay2') }}</div>
          <div>{{ t('home.home.balance') }}: {{ balance }}　{{ t('home.home.cash') }}: {{ cash }}</div>
        </van-radio>
        <template v-if="store.user.id == 1 || store.user.id == 2">
          <van-radio :name="10">UZUM</van-radio>
          <van-radio :name="11">Yangdex </van-radio>
        </template>
      </van-radio-group>
    </div>

    <div class="submit">
      <div class="p-l-20px">
        <div class="font-size-2rem m-b-4px color-#FB553C">
          {{ createOrder.priceFinalPay }}
          <del v-if="createOrder.priceFinalPay != createOrder.priceOriginal" class="font-size-1.4rem color-#333">
            {{ createOrder.priceOriginal }}
          </del>
        </div>
        <div class="font-size-1.2rem">{{ t('shop.submit.total') }}{{ createOrder.amount }}{{ t('shop.submit.unit') }}</div>
      </div>
      <div class="pay" @click="submit">{{ t('shop.submit.pay') }}</div>
    </div>

    <van-popup v-model:show="showCoupons" round position="bottom" style="height: 90%; padding-top: 4px">
      <van-coupon-list
        @change="changeCoupon"
        :coupons="createOrder.availableCoupons"
        :disabled-coupons="createOrder.disabledCoupons"
        :chosen-coupon="chosenCoupon"
        :show-exchange-bar="false"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()

const store = useAppStore()
const router = useRouter()
const route = useRoute()
const shop = ref<ApiShop>({} as ApiShop)
const showCoupons = ref(false)
const chosenCoupon = ref(-1)
const createOrder = ref<ApiOrderCreateVO>({ order: {} } as ApiOrderCreateVO)
const loading = ref(false)
const payWay = ref(2)

const balance = ref(0)
const cash = ref(0)
// console.log('s', store.user?.id)
let productInfos = [] as ApiOrderProductInfo[]
onMounted(() => {
  if (route.query && route.query.t == 1) {
    // 立即购买
    const info = sessionStorage.getItem('buyInfo')
    if (info) {
      productInfos = [JSON.parse(info)]
    } else {
      router.back()
      return
    }
  } else {
    const n = route.query.n as string
    productInfos = n == 'product' ? store.products : store.drinks
    if (!productInfos || productInfos.length < 1) {
      router.replace('/home')
    }
  }
  shop.value = cache.getShop()

  apis.api.userOrderTryCreate({ shopId: shop.value.id, productInfos, payWay: payWay.value }, loading).then(d => {
    createOrder.value = d
    if (d.availableCoupons.length > 0) {
      chosenCoupon.value = 0
    }
  })

  apis.api.userAssetAsset().then(d => {
    balance.value = d.balance
    cash.value = d.cash
  })
})

const useCouponId = computed(() => {
  if (chosenCoupon.value > -1) {
    return createOrder.value.availableCoupons[chosenCoupon.value].id
  }
  return '-1'
})

function changeCoupon(i: number) {
  chosenCoupon.value = i
  showCoupons.value = false
  apis.api
    .userOrderTryCreate({ shopId: shop.value.id, couponId: useCouponId.value, payWay: payWay.value, productInfos }, loading)
    .then(d => (createOrder.value = d))
}

function submit() {
  showConfirmDialog({
    title: t('shop.submit.confirmShop'),
    message: shop.value.name + '\n' + shop.value.distance,
    confirmButtonText: t('shop.submit.this'),
    cancelButtonText: t('shop.submit.choose')
  })
    .then(() => {
      apis.api
        .userOrderCreate({ shopId: shop.value.id, payWay: payWay.value, couponId: useCouponId.value, productInfos }, loading)
        .then(d => router.replace('/take?num=' + d.orderNum))
    })
    .catch(() => {
      changeShop()
    })
}

function changeShop() {
  router.push('/shop')
}
</script>
<style lang="scss" scoped>
.box {
  background-color: #fff;
  margin-left: 20px;
  margin-right: 20px;
  padding: 20px;
  font-size: 1.4rem;
  border-radius: 12px;
  .van-radio {
    margin-bottom: 10px;
  }
}

.submit {
  box-sizing: border-box;
  width: 100vw;
  position: fixed;
  bottom: 0;
  height: 66px;
  background: #ffffff;
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pay {
  width: 106px;
  height: 66px;
  text-align: center;
  line-height: 66px;
  background: #a91d1c;
  font-size: 20px;
  color: #ffffff;
  &:active {
    background: #752020;
  }
}

.products {
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0px;
  }
}
.loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
